import React, { useState, useEffect,useRef } from 'react'
import cn from 'classnames'
import i from '@/index.module.css';
import buildImg from '@/assets/images/build.png'
import { Confirm, Message, Loading,Dialog,Button,Select, Input,Form} from '@knownsec/react-component';
// import SelectAnt from '@/components/SelectAnt';

import BreadCrumb from '@/components/BreadCrumb';
import { modifySysStatus,
    operateNodeApi,
    validateMfa,
    getSystemNode,
    addNodeConfig } from '~/API/index';
import CheckMfa from '@/components/CheckMfa';
import s from './style.module.css';
import { getErrorMessage } from '@/common/constant';
import {
    RunningIcon,
    OfflineIcon,
    CloseIcon,
    RebootIcon,
    SettingIcon
  } from './iconSvg'
export default function SystemControl () {
  const [info, setInfo] = useState([{},{}])
  const [mfaVisible, setMfaVisible] = useState(false)
  const [loading, setLoading] = useState(false)
  const [addLoading, setAddLoading] = useState(false)
  const [mfaData, setMfaData] = useState({})
  const [dialogVisible, setDialogVisible] = useState(false)
  const [option, setOption] = useState([])
  const [loadingDict, setLoadingDict] = useState({})
  const form = useRef()

  useEffect(() => {
    getNodeList()
  }, [])
  const getNodeList = () => {
    getSystemNode().then(res => {
      if (res.status === 'success') {
        setLoading(false)
        setInfo(res?.data?.node_list || [])
        setLoadingDict(
          (res?.data?.node_list || []).reduce((cur, item) => {
            cur[item.id] = false
            return cur
          }, {})
        )
        const opts = res?.data?.role_list || []
        setOption(opts)
      }
    })
  }
  const getNodeType = v => {
    const opt = option.concat({ label: '管理节点', value: 'mgmt' })
    return opt.filter(item => item.value === v)[0]?.label||'--'
  }
  const submitAdd = () => {
    form.current.validateFields().then(res => {
      setAddLoading(true)
      const data = res
      data.role = data.role[0]
      addNodeConfig('POST', data)
        .then(res => {
          if (res.status === 'success') {
            setAddLoading(false)
            Message.show({
              type: 'success',
              message: res.data.detail
            })
            setDialogVisible(false)
            getNodeList()
          }
        })
        .catch(err => {
          setAddLoading(false)
          Message.show({ type: 'error', message: getErrorMessage(err.data) })
        })
    })
  }
  const operateNode = (data, bool) => {
    if (!bool) {
      return
    }
    if (
      (data?.status === 'rebooting' || data?.status === 'poweroff') &&
      data?.type !== 'delete'
    ) {
      Message.show({
        type: 'error',
        message: `当前设备${
          data?.status === 'rebooting' ? '重启中' : '已关机'
        }，不能进行此操作`
      })
      return
    }
    Confirm({
      title: '提示',
      className:s.dialogName,
      message: <div>{getMessage(data)}</div>,
      onconfirm: () => {
        const obj = Object.assign({}, loadingDict)
        obj[data.id] = true
        setLoadingDict(obj)
        postData(data)
      }
    })
    function getMessage(data) {
      if (data?.type === 'offline') {
        return `您确定要将"${data.node_name}(${data.node_ip})"进行下线吗？`
      }
      if (data?.type === 'delete') {
        return `您确定要将"${data.node_name}(${data.node_ip})"进行删除吗？`
      }
      if (data?.type === 'poweroff') {
        return `您确定要将"${data.node_name}(${data.node_ip})"进行关机吗？`
      }
      if (data?.type === 'online') {
        return `您确定要将"${data.node_name}(${data.node_ip})"进行上线吗？`
      }
      if (data?.type === 'reboot') {
        return `您确定要将"${data.node_name}(${data.node_ip})"进行重启吗？`
      }
    }
    function postData(data) {
      const obj = Object.assign({}, loadingDict)
      if (data.node_name === '管理节点') {
        if (data.type === 'poweroff') {
          Message.show({ type: 'success', message: '关机后，不能访问该系统！' })
        }
        if (data.type === 'reboot') {
          Message.show({
            type: 'success',
            message: '请稍候，正在重启中，几分钟内系统不能访问！'
          })
        }
      }
      operateNodeApi('POST', data)
        .then(res => {
          if (res.status === 'success') {
            obj[data.id] = false
            setLoadingDict(obj)
            Message.show({
              type: res.status,
              message: res.data.detail
            })
            getNodeList()
          }
        })
        .catch(err => {
          obj[data.id] = false
          setLoadingDict(obj)
          Message.show({ type: 'error', message: getErrorMessage(err.data) })
        })
    }
  }
  const getMfa = val => {
    const obj = Object.assign({}, mfaData)
    obj.mfa_token = val
    validateMfa('POST', obj, true)
      .then(res => {
        if (res.status === 'success') {
          setMfaVisible(false)
          Message.show({
            type: res.status,
            message: res.message
          })
        }
      })
      .catch(err =>
        Message.show({ type: 'error', message: getErrorMessage(err.data) })
      )
  }
  return (
    <div className={i.mainContent}>
      <BreadCrumb
        arr={[
          { link: '', name: '系统状态' },
          { link: '', name: '系统控制', active: true },
        ]}
      />
     <div className={cn(s.content, i.p24, i.oa, i.h100p, i.mins)}>
        <div className={cn(s.bgc, i.pr)}>
          <Loading show={loading} />
          <div className={cn(i.p24, i.pr, s.paren)}>
            {info.map((item, indx) => (
              <div className={cn(s.calw, i.mb20, i.pr)} key={indx}>
                <Loading show={loadingDict[item.id]} />
                <div>
                  <div className={cn(i.df, i.aic, i.jcsb, i.p24)}>
                    <div>
                      <svg
                        className={i.vam}
                        width="48px"
                        height="48px"
                        viewBox="0 0 48 48"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="页面设计"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            id="系统状态-系统控制"
                            transform="translate(-208.000000, -191.000000)"
                          >
                            <g
                              id="编组-6"
                              transform="translate(208.000000, 191.000000)"
                            >
                              <circle
                                id="椭圆形备份-3"
                                stroke="#0B6FD6"
                                fill-opacity="0.1"
                                fill="#0B6FD6"
                                cx="24"
                                cy="24"
                                r="23.5"
                              ></circle>
                              <g
                                id="3.Icon/1.线性/1.基础通用类/电脑"
                                transform="translate(8.000000, 8.000000)"
                              >
                                <path
                                  d="M26,5 C27.1045695,5 28,5.8954305 28,7 L28,20 C28,21.1045695 27.1045695,22 26,22 L17.055,22 L17.0555556,24.9444444 L17.052,24.9994444 L25,25 L25,27 L7,27 L7,25 L15.0571117,25.0007087 L15.0559463,24.9726734 L15.055,22 L6,22 C4.8954305,22 4,21.1045695 4,20 L4,7 C4,5.8954305 4.8954305,5 6,5 L26,5 Z M26,7 L6,7 L6,20 L26,20 L26,7 Z"
                                  id="形状"
                                  fill="#0B6FD6"
                                  fill-rule="evenodd"
                                ></path>
                                <polygon
                                  id="矩形-copy-67"
                                  points="32 9.79717439e-16 32 32 0 32 0 -9.79717439e-16"
                                ></polygon>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <div className={cn(i.dib, i.vam)}>
                        <span
                          title={info.ip}
                          className={cn(i.vamm, i.ml16, i.db, i.w120, i.ell)}
                        >
                          {item?.node_ip}
                        </span>
                        <span
                          title={info.ip}
                          className={cn(i.vamm, i.ml16, i.db, i.w120, i.ell)}
                        >
                          {item?.node_name}
                        </span>
                      </div>
                    </div>
                    <div>
                      <span className={i.vam}>
                        {item?.status === 'online'
                          ? '运行中'
                          : item?.status === 'offline'
                          ? '已下线'
                          : item?.status === 'rebooting'
                          ? '重启中'
                          : item?.status === 'poweroff'
                          ? '已关机'
                          : item?.status === 'unknown'
                          ? '连接失败'
                          : '状态未识别'}
                      </span>
                      {item?.status === 'online' ? (
                        <RunningIcon />
                      ) : item?.status === 'offline' ? (
                        <OfflineIcon />
                      ) : item?.status === 'poweroff' ? (
                        <CloseIcon />
                      ) : item?.status === 'unknown' ? (
                        <CloseIcon />
                      ) : item?.status === 'rebooting' ? (
                        <RebootIcon />
                      ) : (
                        <CloseIcon />
                      )}
                    </div>
                  </div>
                  <div className={cn(i.p24, s.borr)}>
                    <div className={cn(i.dib)}>
                      <SettingIcon />
                      <span
                        className={cn(i.ml10, i.primaryColor, i.dib, i.vam)}
                      >
                        节点类型: {getNodeType(item.role)}
                      </span>
                    </div>
                    <div className={i.mt10}>
                      <svg
                        className={i.vam}
                        width="16px"
                        height="14px"
                        viewBox="0 0 16 14"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="页面设计"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            id="系统状态-系统控制"
                            transform="translate(-210.000000, -284.000000)"
                          >
                            <g
                              id="编组-6备份-2"
                              transform="translate(208.000000, 281.000000)"
                            >
                              <g id="3.Icon/1.线性/2.业务安全类/流量">
                                <path
                                  d="M7.13349889,4.21778312 C7.29016011,3.61501791 8.11920884,3.59659727 8.32287258,4.15195851 L10.528125,13.2225 L11.9134932,8.54000245 C12.0664159,8.0230781 12.7470187,7.93744341 13.0317189,8.36829034 L14.454375,11.14875 L17.5,11.1489258 L17.5,12.3989258 L14.0715948,12.3989258 C13.8627544,12.3989258 13.6695961,12.294819 13.554286,12.1246856 L12.6675,10.396875 L11.0677101,15.8053928 C10.8940554,16.3923973 10.0833037,16.3969133 9.88349774,15.8499161 L7.7175,6.94 L6.42029331,11.9311427 C6.35466264,12.1836614 6.140234,12.3662969 5.88571632,12.3949826 L2.5,12.3989258 L2.5,11.1489258 L5.33125,11.14875 L7.13349889,4.21778312 Z"
                                  id="路径-24"
                                  fill="#999EA8"
                                  fill-rule="evenodd"
                                ></path>
                                <rect
                                  id="矩形"
                                  fill-rule="nonzero"
                                  x="0"
                                  y="0"
                                  width="20"
                                  height="20"
                                ></rect>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <span className={cn(i.ml10, i.primaryColor, i.dib)}>
                        设备运行时间: {item.boot_time_str}
                      </span>
                    </div>
                  </div>
                  <div className={cn(i.p24, i.df, i.aic, i.jcsb)}>
                    <div className={cn(s.control,s.cp)}>
                      <svg
                        className={cn(i.vam)}
                        width="15px"
                        height="15px"
                        viewBox="0 0 15 15"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="页面-1"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            className={s.fill}
                            id="系统状态-系统控制"
                            transform="translate(-620.000000, -354.000000)"
                            fill={
                              item?.status === 'online'
                                ? '#999EA8'
                                : item?.status === 'offline'
                                ? '#11ab4e'
                                : '#999EA8'
                            }
                          >
                            <g
                              id="编组-6备份"
                              transform="translate(593.000000, 171.000000)"
                            >
                              <g
                                id="编组-6备份-5"
                                transform="translate(24.000000, 180.000000)"
                              >
                                <g id="3.Icon/1.线性/2.业务安全类/CDN-节点备份">
                                  <path
                                    d="M14.7724226,10.6672357 C14.8924597,10.619608 15.0198414,10.6132859 15.1432682,10.6422285 L15.1432682,10.6422285 L15.213018,10.6630751 C15.2174605,10.6646974 15.2218846,10.6663685 15.2262206,10.6679142 C15.2360689,10.671737 15.2458452,10.6758214 15.2554708,10.6803156 C15.2735342,10.688412 15.2912233,10.6973414 15.3087738,10.7071855 L15.3087738,10.7071855 L15.351,10.734 L15.3375575,10.7245137 C15.348751,10.7316348 15.359728,10.7391069 15.3710665,10.7475215 L15.4067446,10.7761843 L17.5942446,12.6511843 L17.6506002,12.7059027 C17.8594838,12.9357411 17.8693943,13.2905455 17.6620354,13.5324642 C17.4373965,13.7945429 17.042834,13.8248939 16.7807554,13.600255 L16.7807554,13.600255 L15.6244887,12.6097196 L15.625,16.8757196 L15.6207952,16.9486078 C15.584692,17.2594445 15.3205224,17.5007196 15,17.5007196 L15,17.5007196 L14.9271118,17.4965148 C14.6162751,17.4604116 14.375,17.196242 14.375,16.8757196 L14.375,16.8757196 L14.375,12.6094696 L13.2192446,13.600255 L13.1565508,13.6475789 C12.8974695,13.8188533 12.5453236,13.774383 12.3379646,13.5324642 C12.1133258,13.2703856 12.1436767,12.8758231 12.4057554,12.6511843 L12.4057554,12.6511843 L14.5932554,10.7761843 L14.6473195,10.7344301 L14.6473195,10.7344301 L14.6719266,10.7185514 C14.6769027,10.7154821 14.6819143,10.712488 14.6867214,10.7092175 C14.7099062,10.6955581 14.7335433,10.6836339 14.7581432,10.6742646 C14.7631336,10.6721754 14.7681468,10.6701531 14.7724226,10.6672357 Z M15,3.125 C16.0355339,3.125 16.875,3.96446609 16.875,5 C16.875,6.03553391 16.0355339,6.875 15,6.875 C14.7021205,6.875 14.420465,6.80553663 14.1703482,6.68192461 L12.141854,8.70991285 C12.3691938,9.08654199 12.5,9.52799528 12.5,10 C12.5,10.3056429 12.4451515,10.5984753 12.3447604,10.8691914 L12.98,11.403 L12.093,12.29 L11.6261142,11.898942 C11.1889581,12.2736408 10.6209136,12.5 10,12.5 C9.52825678,12.5 9.08703114,12.3693387 8.71053889,12.1422318 L7.76723175,13.0855389 C7.99433866,13.4620311 8.125,13.9032568 8.125,14.375 C8.125,15.7557119 7.00571187,16.875 5.625,16.875 C4.24428813,16.875 3.125,15.7557119 3.125,14.375 C3.125,12.9942881 4.24428813,11.875 5.625,11.875 C6.08039,11.875 6.50734156,11.9967595 6.87507528,12.209499 L7.83449904,11.2500753 C7.62175947,10.8823416 7.5,10.45539 7.5,10 C7.5,9.52590329 7.63196831,9.08262943 7.86117449,8.70490886 L6.89940052,7.7762446 C6.52622353,7.99779211 6.09046726,8.125 5.625,8.125 C4.24428813,8.125 3.125,7.00571187 3.125,5.625 C3.125,4.24428813 4.24428813,3.125 5.625,3.125 C7.00571187,3.125 8.125,4.24428813 8.125,5.625 C8.125,6.08680628 7.99978526,6.5193671 7.7814546,6.89058363 L8.75611069,7.83093215 C9.12244311,7.62039904 9.5471612,7.5 10,7.5 C10.45539,7.5 10.8823416,7.62175947 11.2500753,7.83449904 L13.2976155,5.78689509 C13.186825,5.54760966 13.125,5.28102483 13.125,5 C13.125,3.96446609 13.9644661,3.125 15,3.125 Z M5.625,13.125 C4.93464406,13.125 4.375,13.6846441 4.375,14.375 C4.375,15.0653559 4.93464406,15.625 5.625,15.625 C6.31535594,15.625 6.875,15.0653559 6.875,14.375 C6.875,13.6846441 6.31535594,13.125 5.625,13.125 Z M10,8.75 C9.30964406,8.75 8.75,9.30964406 8.75,10 C8.75,10.6903559 9.30964406,11.25 10,11.25 C10.6903559,11.25 11.25,10.6903559 11.25,10 C11.25,9.30964406 10.6903559,8.75 10,8.75 Z M15.35,10.734 L15.368,10.747 L15.3589598,10.7390282 L15.3589598,10.7390282 L15.35,10.734 Z M5.625,4.375 C4.93464406,4.375 4.375,4.93464406 4.375,5.625 C4.375,6.31535594 4.93464406,6.875 5.625,6.875 C6.31535594,6.875 6.875,6.31535594 6.875,5.625 C6.875,4.93464406 6.31535594,4.375 5.625,4.375 Z M15,4.375 C14.654822,4.375 14.375,4.65482203 14.375,5 C14.375,5.34517797 14.654822,5.625 15,5.625 C15.345178,5.625 15.625,5.34517797 15.625,5 C15.625,4.65482203 15.345178,4.375 15,4.375 Z"
                                    id="形状结合"
                                  ></path>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <span
                        className={cn(
                          i.vam,
                          item.status === 'online'
                            ? s.greyColor
                            : item.status === 'offline'
                            ? s.safeColor
                            : s.greyColor
                        )}
                        onClick={() => {
                          operateNode(
                            {
                              id: item.id,
                              device_id: item.device_id,
                              role: item.role,
                              node_ip: item.node_ip,
                              node_name: item.node_name,
                              status: item.status,
                              type: 'online'
                            },
                            item.status === 'online'
                              ? false
                              : item.status === 'offline'
                              ? true
                              : false
                          )
                        }}
                      >
                        上线节点
                      </span>
                    </div>
                    <div  className={cn(s.cp)}>
                      <svg
                        className={cn(i.vam)}
                        width="15px"
                        height="15px"
                        viewBox="0 0 15 15"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="页面-1"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            className={s.fill}
                            id="系统状态-系统控制"
                            transform="translate(-620.000000, -354.000000)"
                            fill={
                              item?.status === 'online'
                                ? '#FAAF2B'
                                : item?.status === 'offline'
                                ? '#999EA8'
                                : '#999EA8'
                            }
                          >
                            <g
                              id="编组-6备份"
                              transform="translate(593.000000, 171.000000)"
                            >
                              <g
                                id="编组-6备份-5"
                                transform="translate(24.000000, 180.000000)"
                              >
                                <g id="3.Icon/1.线性/2.业务安全类/CDN-节点备份">
                                  <path
                                    d="M14.7724226,10.6672357 C14.8924597,10.619608 15.0198414,10.6132859 15.1432682,10.6422285 L15.1432682,10.6422285 L15.213018,10.6630751 C15.2174605,10.6646974 15.2218846,10.6663685 15.2262206,10.6679142 C15.2360689,10.671737 15.2458452,10.6758214 15.2554708,10.6803156 C15.2735342,10.688412 15.2912233,10.6973414 15.3087738,10.7071855 L15.3087738,10.7071855 L15.351,10.734 L15.3375575,10.7245137 C15.348751,10.7316348 15.359728,10.7391069 15.3710665,10.7475215 L15.4067446,10.7761843 L17.5942446,12.6511843 L17.6506002,12.7059027 C17.8594838,12.9357411 17.8693943,13.2905455 17.6620354,13.5324642 C17.4373965,13.7945429 17.042834,13.8248939 16.7807554,13.600255 L16.7807554,13.600255 L15.6244887,12.6097196 L15.625,16.8757196 L15.6207952,16.9486078 C15.584692,17.2594445 15.3205224,17.5007196 15,17.5007196 L15,17.5007196 L14.9271118,17.4965148 C14.6162751,17.4604116 14.375,17.196242 14.375,16.8757196 L14.375,16.8757196 L14.375,12.6094696 L13.2192446,13.600255 L13.1565508,13.6475789 C12.8974695,13.8188533 12.5453236,13.774383 12.3379646,13.5324642 C12.1133258,13.2703856 12.1436767,12.8758231 12.4057554,12.6511843 L12.4057554,12.6511843 L14.5932554,10.7761843 L14.6473195,10.7344301 L14.6473195,10.7344301 L14.6719266,10.7185514 C14.6769027,10.7154821 14.6819143,10.712488 14.6867214,10.7092175 C14.7099062,10.6955581 14.7335433,10.6836339 14.7581432,10.6742646 C14.7631336,10.6721754 14.7681468,10.6701531 14.7724226,10.6672357 Z M15,3.125 C16.0355339,3.125 16.875,3.96446609 16.875,5 C16.875,6.03553391 16.0355339,6.875 15,6.875 C14.7021205,6.875 14.420465,6.80553663 14.1703482,6.68192461 L12.141854,8.70991285 C12.3691938,9.08654199 12.5,9.52799528 12.5,10 C12.5,10.3056429 12.4451515,10.5984753 12.3447604,10.8691914 L12.98,11.403 L12.093,12.29 L11.6261142,11.898942 C11.1889581,12.2736408 10.6209136,12.5 10,12.5 C9.52825678,12.5 9.08703114,12.3693387 8.71053889,12.1422318 L7.76723175,13.0855389 C7.99433866,13.4620311 8.125,13.9032568 8.125,14.375 C8.125,15.7557119 7.00571187,16.875 5.625,16.875 C4.24428813,16.875 3.125,15.7557119 3.125,14.375 C3.125,12.9942881 4.24428813,11.875 5.625,11.875 C6.08039,11.875 6.50734156,11.9967595 6.87507528,12.209499 L7.83449904,11.2500753 C7.62175947,10.8823416 7.5,10.45539 7.5,10 C7.5,9.52590329 7.63196831,9.08262943 7.86117449,8.70490886 L6.89940052,7.7762446 C6.52622353,7.99779211 6.09046726,8.125 5.625,8.125 C4.24428813,8.125 3.125,7.00571187 3.125,5.625 C3.125,4.24428813 4.24428813,3.125 5.625,3.125 C7.00571187,3.125 8.125,4.24428813 8.125,5.625 C8.125,6.08680628 7.99978526,6.5193671 7.7814546,6.89058363 L8.75611069,7.83093215 C9.12244311,7.62039904 9.5471612,7.5 10,7.5 C10.45539,7.5 10.8823416,7.62175947 11.2500753,7.83449904 L13.2976155,5.78689509 C13.186825,5.54760966 13.125,5.28102483 13.125,5 C13.125,3.96446609 13.9644661,3.125 15,3.125 Z M5.625,13.125 C4.93464406,13.125 4.375,13.6846441 4.375,14.375 C4.375,15.0653559 4.93464406,15.625 5.625,15.625 C6.31535594,15.625 6.875,15.0653559 6.875,14.375 C6.875,13.6846441 6.31535594,13.125 5.625,13.125 Z M10,8.75 C9.30964406,8.75 8.75,9.30964406 8.75,10 C8.75,10.6903559 9.30964406,11.25 10,11.25 C10.6903559,11.25 11.25,10.6903559 11.25,10 C11.25,9.30964406 10.6903559,8.75 10,8.75 Z M15.35,10.734 L15.368,10.747 L15.3589598,10.7390282 L15.3589598,10.7390282 L15.35,10.734 Z M5.625,4.375 C4.93464406,4.375 4.375,4.93464406 4.375,5.625 C4.375,6.31535594 4.93464406,6.875 5.625,6.875 C6.31535594,6.875 6.875,6.31535594 6.875,5.625 C6.875,4.93464406 6.31535594,4.375 5.625,4.375 Z M15,4.375 C14.654822,4.375 14.375,4.65482203 14.375,5 C14.375,5.34517797 14.654822,5.625 15,5.625 C15.345178,5.625 15.625,5.34517797 15.625,5 C15.625,4.65482203 15.345178,4.375 15,4.375 Z"
                                    id="形状结合"
                                  ></path>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <span
                        className={cn(
                          i.vam,
                          item.status === 'online'
                            ? s.warnColor
                            : item.status === 'offline'
                            ? s.greyColor
                            : s.greyColor
                        )}
                        onClick={() => {
                          operateNode(
                            {
                              id: item.id,
                              device_id: item.device_id,
                              role: item.role,
                              node_ip: item.node_ip,
                              node_name: item.node_name,
                              status: item.status,
                              type: 'offline'
                            },
                            item.status === 'online'
                              ? true
                              : item.status === 'offline'
                              ? false
                              : false
                          )
                        }}
                      >
                        下线节点
                      </span>
                    </div>
                    <div className={cn(i.pr, s.oper)}>
                      <svg
                        className={i.vam}
                        width="16px"
                        height="16px"
                        viewBox="0 0 16 16"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="页面-1"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            id="系统状态-系统控制"
                            transform="translate(-470.000000, -353.000000)"
                          >
                            <g
                              id="编组-6备份-6"
                              transform="translate(184.000000, 171.000000)"
                            >
                              <g
                                id="编组-6备份-9"
                                transform="translate(284.000000, 180.000000)"
                              >
                                <g id="3.Icon/1.线性/4.操作编辑类/其他">
                                  <path
                                    className={s.path}
                                    d="M10,2.5 C14.1421356,2.5 17.5,5.85786438 17.5,10 C17.5,14.1421356 14.1421356,17.5 10,17.5 C5.85786438,17.5 2.5,14.1421356 2.5,10 C2.5,5.85786438 5.85786438,2.5 10,2.5 Z M10,3.75 C6.54822031,3.75 3.75,6.54822031 3.75,10 C3.75,13.4517797 6.54822031,16.25 10,16.25 C13.4517797,16.25 16.25,13.4517797 16.25,10 C16.25,6.54822031 13.4517797,3.75 10,3.75 Z M6.875,8.75 C7.56535594,8.75 8.125,9.30964406 8.125,10 C8.125,10.6903559 7.56535594,11.25 6.875,11.25 C6.18464406,11.25 5.625,10.6903559 5.625,10 C5.625,9.30964406 6.18464406,8.75 6.875,8.75 Z M10,8.75 C10.6903559,8.75 11.25,9.30964406 11.25,10 C11.25,10.6903559 10.6903559,11.25 10,11.25 C9.30964406,11.25 8.75,10.6903559 8.75,10 C8.75,9.30964406 9.30964406,8.75 10,8.75 Z M13.125,8.75 C13.8153559,8.75 14.375,9.30964406 14.375,10 C14.375,10.6903559 13.8153559,11.25 13.125,11.25 C12.4346441,11.25 11.875,10.6903559 11.875,10 C11.875,9.30964406 12.4346441,8.75 13.125,8.75 Z"
                                    id="形状"
                                    fill="#999EA8"
                                    fill-rule="evenodd"
                                  ></path>
                                  <rect
                                    id="矩形"
                                    x="0"
                                    y="0"
                                    width="20"
                                    height="20"
                                  ></rect>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <span className={cn(i.vam, i.primaryColor)}>
                        <span className={cn(s.spa, i.ml5,s.cp)}>更多操作</span>
                        <div className={cn(i.pa, s.more,s.cp)}>
                          <div className={cn(i.tac, i.pt10, i.pb10, s.hov)}>
                            <svg
                              className={cn(i.vam)}
                              width="14px"
                              height="16px"
                              viewBox="0 0 14 16"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              xlink="http://www.w3.org/1999/xlink"
                            >
                              <g
                                id="页面-1"
                                stroke="none"
                                stroke-width="1"
                                fill="none"
                                fill-rule="evenodd"
                              >
                                <g
                                  id="系统状态-系统控制"
                                  transform="translate(-891.000000, -398.000000)"
                                >
                                  <g
                                    id="9.表单/7.选择器/1.样式一/下拉"
                                    transform="translate(872.000000, 382.000000)"
                                  >
                                    <g id="编组-7">
                                      <g
                                        id="3.Icon/4.操作编辑类/刷新"
                                        transform="translate(16.000000, 14.000000)"
                                      >
                                        <path
                                          className={s.paths}
                                          d="M12.9826943,2.27133848 L14.8576943,5.51893375 L11.610099,7.39393375 L10.985099,6.31140199 L12.0676308,5.68640199 C12.1495439,5.63910944 12.2240794,5.5839458 12.2908334,5.52241801 C11.5772839,5.20332177 10.8016419,5.03623948 10,5.03623948 C6.89339828,5.03623948 4.375,7.55463776 4.375,10.6612395 C4.375,13.7678412 6.89339828,16.2862395 10,16.2862395 C13.0511267,16.2862395 15.5348696,13.8569809 15.6226018,10.8270909 L15.625,10.6612395 L16.875,10.6612395 C16.875,14.4581971 13.7969577,17.5362395 10,17.5362395 C6.20304235,17.5362395 3.125,14.4581971 3.125,10.6612395 C3.125,6.86428183 6.20304235,3.78623948 10,3.78623948 C10.9431705,3.78623948 11.8419814,3.97616507 12.6602741,4.31985738 C12.633225,4.20364706 12.5884339,4.08845946 12.5251625,3.97887024 L11.9001625,2.89633848 L12.9826943,2.27133848 Z"
                                          id="路径"
                                          fill="#999EA8"
                                          fill-rule="evenodd"
                                        ></path>
                                        <rect
                                          id="矩形"
                                          x="0"
                                          y="0"
                                          width="20"
                                          height="20"
                                        ></rect>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </svg>
                            <span
                              className={cn(i.vam, s.fcor, i.ml10)}
                              onClick={() => {
                                operateNode(
                                  {
                                    id: item.id,
                                    device_id: item.device_id,
                                    role: item.role,
                                    node_ip: item.node_ip,
                                    node_name: item.node_name,
                                    status: item.status,
                                    type: 'reboot'
                                  },
                                  true
                                )
                              }}
                            >
                              重启设备
                            </span>
                          </div>
                          <div className={cn(i.tac, i.pt10, i.pb10, s.hov)}>
                            <svg
                              className={i.vam}
                              width="14px"
                              height="16px"
                              viewBox="0 0 14 16"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              xlink="http://www.w3.org/1999/xlink"
                            >
                              <g
                                id="页面-1"
                                stroke="none"
                                stroke-width="1"
                                fill="none"
                                fill-rule="evenodd"
                              >
                                <g
                                  id="系统状态-系统控制"
                                  transform="translate(-891.000000, -446.000000)"
                                >
                                  <g
                                    id="9.表单/7.选择器/1.样式一/下拉"
                                    transform="translate(872.000000, 382.000000)"
                                  >
                                    <g
                                      id="编组-7备份"
                                      transform="translate(0.000000, 48.000000)"
                                    >
                                      <g
                                        id="3.Icon/1.线性/4.操作编辑类/关机"
                                        transform="translate(16.000000, 14.000000)"
                                      >
                                        <path
                                          className={s.paths}
                                          d="M12.6820723,4.42459756 C15.2028638,5.49355105 16.875,7.9710587 16.875,10.7566044 C16.875,14.5535621 13.7969577,17.6316044 10,17.6316044 C6.20304235,17.6316044 3.125,14.5535621 3.125,10.7566044 C3.125,7.9710587 4.52236121,5.69845676 7.31537566,4.42568038 L7.8038465,5.57628728 L7.8038465,5.57628728 C5.74216238,6.45154065 4.375,8.47805497 4.375,10.7566044 C4.375,13.8632062 6.89339828,16.3816044 10,16.3816044 C13.1066017,16.3816044 15.625,13.8632062 15.625,10.7566044 C15.625,8.53884293 14.4868769,6.63102259 12.1940681,5.57628728 L12.6820723,4.42459756 L12.6820723,4.42459756 Z M10.625,2.5 L10.625,8.75 L9.375,8.75 L9.375,2.5 L10.625,2.5 Z"
                                          id="形状"
                                          fill="#999EA8"
                                          fill-rule="evenodd"
                                        ></path>
                                        <rect
                                          id="矩形"
                                          x="0"
                                          y="0"
                                          width="20"
                                          height="20"
                                        ></rect>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </svg>
                            <span
                              className={cn(i.vam, s.fcor, i.ml10)}
                              onClick={() => {
                                operateNode(
                                  {
                                    id: item.id,
                                    device_id: item.device_id,
                                    role: item.role,
                                    node_ip: item.node_ip,
                                    node_name: item.node_name,
                                    status: item.status,
                                    type: 'poweroff'
                                  },
                                  true
                                )
                              }}
                            >
                              关闭设备
                            </span>
                          </div>
                          <div className={cn(i.tac, i.pt10, i.pb10, s.hov)}>
                            <svg
                              className={i.vam}
                              width="16px"
                              height="14px"
                              viewBox="0 0 16 14"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              xlink="http://www.w3.org/1999/xlink"
                            >
                              <g
                                id="页面-1"
                                stroke="none"
                                stroke-width="1"
                                fill="none"
                                fill-rule="evenodd"
                              >
                                <g
                                  id="系统状态-系统控制"
                                  transform="translate(-890.000000, -495.000000)"
                                >
                                  <g
                                    id="9.表单/7.选择器/1.样式一/下拉"
                                    transform="translate(872.000000, 382.000000)"
                                  >
                                    <g
                                      id="编组-7备份-2"
                                      transform="translate(0.000000, 96.000000)"
                                    >
                                      <g
                                        id="3.Icon/1.线性/1.基础通用类/删除"
                                        transform="translate(16.000000, 14.000000)"
                                      >
                                        <path
                                          className={s.paths}
                                          d="M12.7342997,3.125 C13.2562845,3.125 13.7233121,3.44935285 13.9056001,3.93847367 L14.53375,5.625 L17.5,5.625 L17.5,6.875 L16.11125,6.875 L15.1235512,15.7630394 C15.0532133,16.3960803 14.518133,16.875 13.8811965,16.875 L6.11880349,16.875 C5.48186697,16.875 4.9467867,16.3960803 4.87644882,15.7630394 L3.88875,6.875 L2.5,6.875 L2.5,5.625 L5.465625,5.625 L6.09439986,3.93847367 C6.27668794,3.44935285 6.74371552,3.125 7.26570032,3.125 L12.7342997,3.125 Z M14.999375,6.875 L5,6.875 L6.00158494,15.625 L13.9984151,15.625 L14.999375,6.875 Z M8.75,8.125 L8.75,13.75 L7.5,13.75 L7.5,8.125 L8.75,8.125 Z M12.5,8.125 L12.5,13.75 L11.25,13.75 L11.25,8.125 L12.5,8.125 Z M12.6700842,4.375 L7.32991577,4.375 L6.875,5.625 L13.125,5.625 L12.6700842,4.375 Z"
                                          id="形状"
                                          fill="#999EA8"
                                          fill-rule="evenodd"
                                        ></path>
                                        <rect
                                          id="矩形-copy-39"
                                          x="0"
                                          y="0"
                                          width="20"
                                          height="20"
                                        ></rect>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </svg>
                            <span
                              className={cn(i.vam, s.fcor, i.ml10)}
                              onClick={() => {
                                operateNode(
                                  {
                                    id: item.id,
                                    device_id: item.device_id,
                                    role: item.role,
                                    node_ip: item.node_ip,
                                    node_name: item.node_name,
                                    type: 'delete'
                                  },
                                  true
                                )
                              }}
                            >
                              删除设备
                            </span>
                          </div>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
            <div
              className={cn(s.calw, i.mb20, i.tac)}
              onClick={() => {
                form?.current && form.current.resetFields()
                setDialogVisible(true)
              }}
            >
              <div className={cn(i.pt20, i.pb20)}>
                <svg
                  width="389px"
                  height="200px"
                  viewBox="0 0 389 226"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                >
                  <g
                    id="页面-1"
                    stroke="none"
                    stroke-width="1"
                    fill="none"
                    fill-rule="evenodd"
                  >
                    <g
                      id="系统状态-系统控制"
                      transform="translate(-184.000000, -655.000000)"
                    >
                      <g
                        id="编组-6备份-3"
                        transform="translate(184.000000, 655.000000)"
                      >
                        <rect
                          id="矩形"
                          stroke="#FFF"
                          fill="#FFFFFF"
                          x="0.5"
                          y="0.5"
                          width="360"
                          height="225"
                          rx="2"
                        ></rect>
                        <text
                          id="添加节点"
                          font-family="PingFangSC-Regular, PingFang SC"
                          font-size="14"
                          font-weight="normal"
                          line-spacing="20"
                          fill="#0B6FD6"
                        >
                          <tspan x="167" y="154">
                            添加节点
                          </tspan>
                        </text>
                        <g
                          id="编组-6"
                          transform="translate(171.000000, 67.000000)"
                          stroke="#0B6FD6"
                        >
                          <circle
                            id="椭圆形"
                            fill-opacity="0.1"
                            fill="#0B6FD6"
                            cx="24"
                            cy="24"
                            r="23.5"
                          ></circle>
                          <line
                            x1="16"
                            y1="24.5"
                            x2="32"
                            y2="24.5"
                            id="路径-2"
                            stroke-width="2"
                            stroke-linecap="round"
                          ></line>
                          <line
                            x1="16"
                            y1="24.5"
                            x2="32"
                            y2="24.5"
                            id="路径-2备份"
                            stroke-width="2"
                            stroke-linecap="round"
                            transform="translate(24.000000, 24.500000) rotate(90.000000) translate(-24.000000, -24.500000) "
                          ></line>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Dialog
        className={s.w500}
        title="添加节点"
        visible={dialogVisible}
        closable={true}
        confirmText=""
        cancelText=""
        onhide={() => {
          form.current.resetFields()
          setDialogVisible(false)
        }}
      >
        <div className={cn(i.pl30, i.pr30, i.pt20, i.pr)}>
          <Loading show={addLoading} />
          <Form
            labelCol={{ span: 4 }}
            ref={form}
            onValuesChange={newItem => {
              const values = Object.keys(newItem).reduce((total, key) => {
                let value
                if (newItem[key].selectedItem) {
                  if (newItem[key].selectedItem.length > 0) {
                    value = [newItem[key].selectedItem[0].value]
                  } else if (newItem[key].selectedItem.length === 0) {
                    value = item[key]
                  }
                } else if (Object.keys(newItem[key]).indexOf('value') > -1) {
                  value = newItem[key].value
                } else {
                  value = newItem[key]
                }
                total[key] = value
                return total
              }, {})
              form.current.setFieldsValue(values)
            }}
          >
            <Form.Item
              label="节点类型"
              rules={[{ required: true, message: '请选择节点类型' }]}
              name="role"
            >
              <Select pro className={cn(i.w100p)} option={option} />
            </Form.Item>
            <Form.Item
              label="节点IP"
              rules={[{ required: true, message: '请输入节点IP' }]}
              name="node_ip"
            >
              <Input pro placeholder="请输入节点IP" />
            </Form.Item>
            <Form.Item
              label="节点名称"
              rules={[{ required: true, message: '请输入节点名称' }]}
              name="node_name"
            >
              <Input pro placeholder="请输入节点名称" />
            </Form.Item>
          </Form>
          <div className={cn(i.tac)}>
            <Button
              type="default"
              className={i.vam}
              onClick={() => {
                form.current.resetFields()
                setDialogVisible(false)
              }}
            >
              取消
            </Button>
            <Button
              type="primary"
              className={cn(i.ml20, i.vam)}
              onClick={submitAdd}
            >
              添加
            </Button>
          </div>
        </div>
      </Dialog>
      <CheckMfa visible={mfaVisible} getMfa={(v) => getMfa(v)} setVis={(v) => setMfaVisible(v)} />
    </div>
  );
}
